<template>
    <view>
        <!-- <view class="status_bar">
            <text>个人资料</text>
        </view> -->
        <view class="box">
            <view class="userdata">
                <view class="img" @click="upload">头像<image class="userhead" :src="avatar"></image>
                    <!-- <image class="img2" src="../../static/img/myhome/info-xiangji@3x.png"></image> -->
                </view>
                <view @click="editname">姓名
                    <view><input type="text" v-model="nickname" placeholder="输入姓名"/>
                        <!-- <image src="../../static/img/myhome/more@3x.png"></image> -->
                    </view>
                </view>
                <view>手机号
                    <view><input type="number" v-model="mobile" maxlength="11" placeholder="输入手机号"/></view>
                </view>
                <view>身份证
                    <view><input  v-model="id_card" placeholder="输入身份证"/>
                        <!-- <image src="../../static/img/myhome/more@3x.png"></image> -->
                    </view>
                </view>
                <view>公司
                    <view><input  v-model="company" placeholder="输入公司名称"/>
                        <!-- <image src="../../static/img/myhome/more@3x.png"></image> -->
                    </view>
                </view>
                <view @click="popupShow = true">{{$u.test.isEmpty(zhifupass) ? '设置支付密码' : '修改支付密码'}}
                    <view><u-icon name="arrow-right"></u-icon></view>
                </view>
            </view>
            
            <view>
                <button @click="send" class="button">确定</button>
            </view>
        </view>
        
        <u-popup v-model="popupShow" mode="center" border-radius="20">
            <view style="padding: 50rpx;">
                <view style="font-size: 35rpx;font-weight: bold;text-align: center;">{{$u.test.isEmpty(zhifupass) ? '设置支付密码' : '修改支付密码'}}</view>
                <view style="display: flex;font-size: 30rpx;padding: 30rpx 0;" v-if="!$u.test.isEmpty(zhifupass)">
                    <view style="width: 150rpx;text-align: right;">原密码：</view>
                    <view>
                        <input type="number" v-model="pwd" maxlength="6" placeholder="原六位密码" password style="border-bottom: 1rpx solid #999999;"/>
                    </view>
                </view>
                <view style="display: flex;font-size: 30rpx;padding: 30rpx 0;">
                    <view style="width: 150rpx;text-align: right;">{{$u.test.isEmpty(zhifupass) ? '密码' : '新密码'}}：</view>
                    <view>
                        <input type="number" v-model="password" maxlength="6" placeholder="六位密码" password style="border-bottom: 1rpx solid #999999;"/>
                    </view>
                </view>
                <view style="display: flex;font-size: 30rpx;padding: 30rpx 0;">
                    <view style="width: 150rpx;text-align: right;">确认密码：</view>
                    <view>
                        <input type="number" v-model="passwords" maxlength="6" placeholder="确认六位密码" password style="border-bottom: 1rpx solid #999999;"/>
                    </view>
                </view>

                <view>
                    <button @click="sendPassword" class="button">确认设置</button>
                </view>
            </view>
        </u-popup>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                // userInfo: {},
                avatar: '',
                nickname: '',
                mobile: '',
                id_card: '',
                baseUrl: '',
                popupShow: false,
                pwd: '',
                password: '',
                passwords: '',
                zhifupass: '',
                company:''
            };
        },
        onLoad() {
            this.baseUrl = this.$store.state.baseUrl;
            if(!this.$u.test.isEmpty(this.$store.state.userInfo)) {
                this.avatar = this.$store.state.userInfo.avatar;
                // this.nickname = this.$u.test.isEmpty(this.$store.state.userInfo.username) ? this.$store.state.userInfo.nickname : this.$store.state.userInfo.username
                this.nickname = this.$store.state.userInfo.name;
                this.mobile = this.$store.state.userInfo.mobile;
                this.id_card = this.$store.state.userInfo.id_card;
                this.zhifupass = this.$store.state.userInfo.zhifupass;
                this.company = this.$store.state.userInfo.company;
            }
        },
        methods: {
            // 修改姓名
            editname() {
                // uni.navigateTo({
                //     url: './edituserdata'
                // })
            },
            upload() {
                let _this = this;
                uni.chooseImage({
                    count: 1, //默认9
                    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
                    sourceType: ['album'], //从相册选择
                    success: function (res) {
                        uni.uploadFile({
                            url: _this.baseUrl + '/api/images/upload',
                            filePath: res.tempFilePaths[0],
                            name: 'file',
                            success: (uploadFileRes) => {
                                _this.avatar = JSON.parse(uploadFileRes.data).data.url;
                            }
                        });
                    }
                });
            },
            send() {
                this.$u.api.postEditinfo({
                    avatar: this.avatar,
                    nickname: this.nickname,
                    mobile: this.mobile,
                    card: this.id_card,
                    company:this.company
                }).then(res => {
                    this.$store.commit('setIsUserEdit', 1);
                    uni.showModal({
                        title: '提示',
                        content: '修改成功',
                        showCancel: false,
                        success: function (res) {
                            if (res.confirm) {
                                uni.navigateBack({
                                    delta: 1
                                });
                            } else if (res.cancel) {
                            }
                        }
                    });
                }).catch(err => {
                    
                })
            },
            sendPassword() {
                if(!this.$u.test.isEmpty(this.zhifupass) && this.$u.test.isEmpty(this.pwd)) {
                    uni.showToast({
                        title: '请输入原密码',
                        duration: 1000,
                        icon: 'none'
                    });
                    return ;
                } else if (!this.$u.test.digits(this.password)) {
                    uni.showToast({
                        title: '请输入六位纯数字密码',
                        duration: 1000,
                        icon: 'none'
                    });
                    return ;
                } else if (this.password !== this.passwords) {
                    uni.showToast({
                        title: '两次输入密码不一致',
                        duration: 1000,
                        icon: 'none'
                    });
                    return ;
                } else {
                    if(!this.$u.test.isEmpty(this.zhifupass)) {
                        this.$u.api.postEditPwd({
                            pwd: this.pwd,
                            newpwd: this.password,
                            repwd: this.passwords,
                        }).then(res => {
                            uni.showToast({
                                title: '修改成功',
                                duration: 1000
                            });
                            this.popupShow = false;
                        }).catch(err => {
                            uni.showToast({
                                title: err.msg,
                                duration: 1000,
                                icon: 'none'
                            });
                        })
                    } else {
                        this.$u.api.postZhifupass({
                            password: this.password,
                            passwords: this.passwords,
                        }).then(res => {
                            uni.showToast({
                                title: '设置成功',
                                duration: 1000
                            });
                            this.popupShow = false;
                        }).catch(err => {
                            uni.showToast({
                                title: err.msg,
                                duration: 1000,
                                icon: 'none'
                            });
                        })
                    }
                }
            }
        },
        onPullDownRefresh() {
            uni.stopPullDownRefresh()
        }
    }
</script>

<style>
    page {
        background-color: #eee;
    }
</style>

<style lang="scss" scoped>
    .status_bar {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 176rpx;
        background-color: #fff;

        text {
            font-family: PingFang-SC-Bold;
            font-size: 36rpx;
            font-weight: 600;
            color: #191919;
            margin-top: 75rpx;
        }
    }

    .box {
        width: 100%;
        // min-height: 1642rpx;
        
        input {
            text-align: right;
        }
        
        .userdata {
            position: relative;
            border-radius: 20rpx;
            background-color: #FFFFFF;
            margin: 31rpx;
            padding: 0 30rpx;
            font-size: 32rpx;
            font-weight: 600;
            color: #191919;
            
            .img {
                position: relative;
                
                .img2 {
                    position: absolute;
                    bottom: 25rpx;
                    right: 0;
                    width: 42rpx;
                    height: 42rpx;
                    background-color: #FFFFFF;
                    border-radius: 50%;
                }
            }
            
            .userhead {
                position: relative;
                top: 30rpx;
                right: -445rpx;
                width: 120rpx;
                height: 120rpx;
                box-shadow: 0rpx 10rpx 25rpx 0rpx rgba(3, 8, 23, 0.05);
                border-radius: 50%;
                border: 10rpx solid #FFFFFF;
                box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
            }

            view:nth-child(1) {
                line-height: 140rpx;
            }

            view:nth-child(n+2) {
                border-top: 1px solid #eee;
                padding: 30rpx 0;

                view {
                    float: right;
                    font-family: PingFang-SC-Bold;
                    font-size: 28rpx;
                    font-weight: normal;
                    font-stretch: normal;
                    line-height: 48rpx;
                    letter-spacing: 0rpx;
                    color: #999999;
                }

                image {
                    position: relative;
                    top: 9rpx;
                    right: 0;
                    margin-left: 46rpx;
                    width: 36rpx;
                    height: 36rpx;
                }
            }
        }
    }
    
    .button {
        margin-top: 30rpx;
        width: 570rpx;
        height: 98rpx;
        background-color: #1bc078;
        border-radius: 49rpx;
    
        font-size: 28rpx;
        color: #ffffff;
        line-height: 98rpx;
    }
</style>
